<template>
	<view class="container">
		<com-head textTit="会员卡详情" :backType="1" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<template v-if="details.id">
			<view class="list">
			   <image :src="ele.img || '//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/vip.png'" mode="aspectFill"></image>
			   <view class="content">
				   <view class="vipPrice">{{ele.title || '-'}}</view>
				   <view class="vipPrice" v-if="ele.discount != '10' && vipType == 0">享受折扣{{ele.discount || '-'}}折</view>
			   	  <view class="head">
			   	  	  <text class="price"><text class="pls"><text>¥</text>{{ele.price}}</text> <text class="plText" v-if="ele.give_price*1">送{{Number(ele.give_price).toFixed(0)}}</text></text>
			   	  </view>
				  <view class="shopC">
						<view class="storeList" v-if="vipType == 0">
							{{toStore.cate_type == 2 ? "通用门店: 全部 " : ("指定门店: " + ele.store.title)}}
							<!-- <text v-for="(val,index1) in ele.store" :key="index1"><text v-if="index1 != 0 ">、</text>{{val.name}}</text> -->
						</view>
						<view class="storeList" v-if="vipType == 1">
							全平台通用
						</view>
				  </view>
			   </view>
			</view>
			
			<!-- <view class="head">
				<view class="price">
					<text class="t1">¥{{Number(details.price).toFixed(0)}}</text>
					<text class="t2">{{details.title}}</text>
				</view>
				<view class="givePrice" v-if="details.give_price*1">赠送 {{Number(details.give_price).toFixed(0)}} 元</view>
			</view> -->
			<!-- <view class="scopeWrap">
				<view class="tit" :style="details.store_ids == 0 ? 'margin-bottom:0' :''" v-if="details.store_ids == 0">适用范围：通用门店(所有)</view>
				<view class="tit" v-else>适用范围：指定门店</view>
				<view class="content" v-if="details.store_ids != 0">
					<text v-for="(ele,index) in details.store">{{ele.title}} 、</text>
					正大店（上海）巨鹿店（上海）、徐汇店（上海） 正大店（上海）、巨鹿店（上海）、徐汇店（上海）
				</view>
			</view> -->
			<view class="introduce">
				<view class="tiele">介绍</view>
				<view class="content">
					{{details.content}}
				</view>
			</view>
			
			<view class="footer" v-if="withdrawShow">
				<view @click.stop="binding(ele)">绑定</view> 
			</view>
			
			<view class="footers" v-if="withdrawShow">
				<view @click.stop="this.vipWithdraw()">提现</view> 
			</view>
			<view v-else class="footers" @click="uptInfo()">
				<view>绑定银行卡信息</view>
			</view>
			
			<view class="plss" v-if="withdrawShow" @click="uptInfo()">修改银行卡信息</view>
			
		</template>
		
		<!-- <u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view  slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list:[],
				id:'',
				details:{},
				scrollTop: 0,
				ele: {},
				out_trade_no: '',
				login: false,
				withdrawShow: false,
				userCard: {},
				loginInfo:{
					code:'',
					iv:'',
					encryptedData:'',
					store_id:'',
					share_user_id:'',
					encryptedDataPhone:'',
					ivPhone:''
				},
				vipType: ''
			}
		},
		async onLoad({id, out_trade_no, type}) {
			this.vipType = type
			if(!this.token){
				this.id = id
				this.out_trade_no = out_trade_no
				this.login = true
				return
			}
			this.id = id
			this.out_trade_no = out_trade_no
			this.getVipList()
		},
		onShow() {
			if(!this.token){
				this.login = true
				return
			}
			this.getVipList()
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		methods: {
			uptInfo() {
				uni.setStorageSync('bankCard', this.userCard);
				this.jump('/pages/mine/bankCard?type=1')
			},
			async withdraw() {
				let {data,code} = await this.$u.api.getUserCard();
				if(code){
					if (!data) return this.jump('/pages/mine/bankCard')
					this.withdrawShow = true
					this.userCard = data
				}
			},
			async vipWithdraw(){
				let {data,code} = await this.$u.api.vipWithdraw({out_trade_no: this.out_trade_no});
				if(code){
					this.toast('提现成功，1-3个工作日到账')
				}
			},
			// 绑定
			async binding(row) {
				let {data,code} = await this.$u.api.vipBind({out_trade_no: this.out_trade_no});
				if(code){
					this.toast('绑定成功')
					this.jump('/pages/mine/index', 1)
				}
			},
			// 获取列表
			async getVipList(){
				let {data,code} = await this.$u.api.getvip({id:this.id,store_id:this.store_id});
				if(code){
					this.details = data
					this.ele = data
					this.withdraw()
				}
			},
			
			
			// 授权用户信息
			async getuserinfo(e){
				// 登录
				uni.login({
					success: res => {
					 this.loginInfo.code = res.code
					 this.isClick = true
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						let { iv, encryptedData } = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_id
						this.loginInfo.fid = this.fid
						this.wxLogin()
				   },
				   fail:(res1)=>{
					   console.log(res1,'登录失败');
					   this.isClick = false
				   }
				})
			},
			// 登录
			async wxLogin(){
				let {data,code,msg} = await this.$u.api.wxLogin(this.loginInfo);
				uni.hideLoading()
				if(code){
					this.login = false
					if(data.user_token){
						this.$u.vuex('token', data.user_token)
						await this.getUserInfo()
						this.getVipList()
						setTimeout(()=>{
							uni.showToast({
								duration:2000,
								title:'登录成功',
								icon:'success'
							})
						},500)
					}else{
						this.isPhoneAuth = true
					}
				}else{
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {data,code} = await this.$u.api.userInfo({store_id:this.store_id});
				if(code){
					this.$u.vuex('userInfo', data)
					console.log('userinfo-----', data)
				}
			},
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 55rpx 32rpx;
	.introduce{
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 35rpx 32rpx 48rpx 32rpx;
		box-sizing: border-box;
		.title{
			color: #333333;
			font-size: 26rpx;
			margin-bottom: 26rpx;
		}
		.content{
			color: #999999;
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
	.scopeWrap{
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		padding: 35rpx 32rpx;
		box-sizing: border-box;
		margin: 30rpx 0;
		.tit{
			color: #333333;
			font-size: 26rpx;
			margin-bottom: 40rpx;
		}
		.content{
			color: #999999;
			font-size: 24rpx;
			line-height: 40rpx;
		}
	}
	
	.list{
		width: 686rpx;
		height: 350rpx;
		position: relative;
		margin-bottom: 20rpx;
		border-radius: 15rpx;
		overflow: hidden;
		margin-top: 20rpx;
		image{
			width: 686rpx;
			height: 350rpx;
			position: absolute;
			top: 0;
			z-index: 1;
		}
		.content{
			width: 686rpx;
			height: 376rpx;
			position: absolute;
			top: 0;
			z-index: 2;
			padding: 30rpx 36rpx 36rpx 40rpx;
			.vipPrice{
				font-size: 32rpx;
				color: #AA5200;
				margin-bottom: 10rpx;
			}
			.discount{
				width: 100%;
				text-align: right;
				color: #FFFFFF;
				font-size: 36rpx;
			}
			.head{
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				// align-items: center;
				.price{
					font-size: 64rpx;
					font-weight: 500;
					color: #AA5200;
					line-height: 65rpx;
					text{
						margin-left: 24rpx;
						color: #AA5200;
						font-size: 64rpx;
						// margin-left: 14rpx;
					}
					.pls{
						margin-left: 0rpx !important;
						font-weight: bold;
					  background: -webkit-linear-gradient(left, #CD7122, #FDAD35);
					  -webkit-background-clip: text;
					  -webkit-text-fill-color: transparent;
					  background-clip: text;
					  text-fill-color: transparent;
						text{
							margin-left: 0rpx !important;
							margin-right: 10rpx;
						}
					}
					.plText{
						font-size: 50rpx;
					}
				}
				.right{
					display: flex;
					align-items: center;
					color: #007664;
					font-size: 26rpx;
					position: absolute;
					top: 30rpx;
					right: 36rpx;
					text{
						margin-left: 13rpx;
					}
				}
				.t1{
					color: #A08761;
				}
				.t2{
					color: #90929C;
				}
				.t3{
					color: #C2A060;
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #AA5200;
				margin-top: 60rpx;
				// width: 100%;
				.buy{
					// width: 185rpx;
					height: 65rpx;
					line-height: 65rpx;
					text-align: center;
					padding: 0 20rpx;
					
					background: linear-gradient(85deg, #DB985A, #AA5200);;
					border-radius: 100rpx;
					color: #FFFFFF;
					font-size: 32rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
	
	.footer, .footers{
		width: 100%;
		height: 130rpx;
		margin-top: 100rpx;
		view{
			width: 686rpx;
			height: 82rpx;
			background: linear-gradient(135deg, #50DCC2 0%, #007664);
			border-radius: 60rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82rpx;
			margin: 24rpx auto 0;
		}
	}
	.footers{
		margin-top: 0rpx;
	}

}

.plss{
	text-align: center;
	color: #007664;
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
